<template>
  <Layout class="h-screen">
    <!-- 左侧导航栏 -->
    <LayoutSider :style="siderStyle">
      <div class="sidebar bg-gray-900 text-white flex flex-col items-center pt-6">
        <div v-for="tab in tabs" :key="tab.key"
          class="nav-item group flex flex-col items-center mb-8 cursor-pointer hover:bg-gray-800 rounded-lg p-2 transition-colors duration-200"
          @click="switchTab(tab.key)">
          <Icon :type="tab.icon" size="large" class="text-gray-400 group-hover:text-white" />
          <span class="nav-text text-xs mt-2 text-gray-400 group-hover:text-white">{{ tab.label }}</span>
        </div>
      </div>
    </LayoutSider>

    <!-- 右侧内容区域 -->
    <Layout>
      <!-- 内容区域 -->
      <LayoutContent :style="contentStyle">
        <!-- 右侧内容区域 -->
        <div class="w-full h-full bg-gray-800 overflow-y-auto">
          <VideoList />
        </div>
      </LayoutContent>
    </Layout>
  </Layout>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Layout, LayoutContent, LayoutSider } from '@kousum/semi-ui-vue'
import { Icon } from '@kousum/semi-icons-vue'
import VideoList from './VideoList.vue'

// 导航栏选项
const tabs = ref([
  { key: 'recommend', icon: 'home', label: '推荐' },
  { key: 'follow', icon: 'heart', label: '关注' },
  { key: 'friends', icon: 'users', label: '朋友' },
  { key: 'profile', icon: 'user', label: '我的' },
])

// 切换导航栏选项
const switchTab = (tab: string) => {
  console.log('切换到:', tab)
  // 这里可以根据 tab 的值加载不同的内容
}

const siderStyle = ref({
  width: '80px',
  backgroundColor: 'var(--semi-color-fill-2)',
})

const headerStyle = ref({
  height: '64px',
  lineHeight: '64px',
  backgroundColor: 'var(--semi-color-fill-0)',
})

const contentStyle = ref({
  padding: 0,
  backgroundColor: 'var(--semi-color-bg-0)',
})
</script>

<style scoped>
.sidebar {
  @apply w-20 bg-gray-900 text-white flex flex-col items-center pt-6;
}

.nav-item {
  @apply flex flex-col items-center mb-8 cursor-pointer hover:bg-gray-800 rounded-lg p-2 transition-colors duration-200;
}

.nav-text {
  @apply text-xs mt-2 text-gray-400 group-hover:text-white;
}
</style>
